<div [class]="'el-progress el-progress--' + type + (status ? ' is-' + status : '')"
    [class.el-progress--without-text]="!showText" [class.el-progress--text-inside]="textInside">
    <div class="el-progress-bar" *ngIf="type === 'line'">
        <div class="el-progress-bar__outer" [ngStyle]="{height: strokeWidth + 'px'}">
            <div class="el-progress-bar__inner" [style]="colorStryles()">
                <div class="el-progress-bar__innerText" *ngIf="showText && textInside">{{percentage}}%</div>
            </div>
        </div>
    </div>
    <div class="el-progress-circle" *ngIf="type === 'circle'" [ngStyle]="{height: width + 'px', width: width + 'px'}">
        <svg viewBox="0 0 100 100">
            <path class="el-progress-circle__track" [attr.d]="makeTrackPath()" stroke="#e5e9f2"
                [attr.stroke-width]="relativeStrokeWidth" fill="none"></path>
            <path class="el-progress-circle__path" [attr.d]="makeTrackPath()" stroke-linecap="round"
                [attr.stroke]="makeStroke()" [attr.stroke-width]="relativeStrokeWidth" fill="none"
                [style]="svgStyles()"></path>
        </svg> </div>
    <div class="el-progress__text" *ngIf="showText && !textInside" [ngStyle]="{fontSize: progressTextSize + 'px'}">
        <ng-container *ngIf="!status">{{percentage}}%</ng-container> <i *ngIf="status" [class]="makeIconClass()"></i>
    </div>
</div>